﻿@{
    ViewBag.Title = "Ryan Butler.org : ASP.NET MVC Contact Form";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Creating a <abbr title="Active Server Pages">ASP</abbr>.NET <abbr title="Model View Controller">MVC</abbr> Contact Form</h1>
<p>Over the last few years, Microsoft’s investment in transforming Active Server Pages from a basic scripting language into an object oriented language with .NET integration was remarkable. Some noteworthy features in traditional web forms were ability to maintain page state on a page refresh, ability to bind (associate) data to a standard set of web controls and separation of code between a web form and code&#8212;behind.</p>
<p>Microsoft lately has invested resources into transforming traditional <abbr title="Active Server Pages">ASP</abbr>.NET web forms into a different paradigm. <abbr title="Active Server Pages">ASP</abbr>  <abbr title="Model View Controller">MVC</abbr> is the new programming model developer’s use. It gives provides the following abilities: complete n&#8212;tier separation of responsibilities with regards to data from a model, complete control of our presentational markup with semantic <abbr title="Hypertext Markup Language">HTML</abbr> 5 markup from a view, and business logic to map model &#8212; view together in the form of a controller. In the <abbr title="Model View Controller">MVC</abbr> model, we also have an included JavaScript library (JQuery), included at no extra charge.</p>
<p>In the following article, we’ll learn how to create a simple <abbr title="Active Server Pages">ASP</abbr> <abbr title="Model View Controller">MVC</abbr> contact form that will validate and email the contents of the message to any desired recipient.  As a result, we’ll have a functional and capable <abbr title="Model View Controller">MVC</abbr> contact form with validation and the means to drive visitors back to your form again and again.</p>
<table cellspacing="0" id="tutorials" summary="project files">
<tr>
<td colspan="2" class="header">Printable Version </td>
</tr>
<tr>
<td colspan"2" class="caption"><a href="@Url.Content("~/content/aspmvcform/documents/aspmvccontactform.pdf")" target="_blank">PDF</a></td>
</tr>
<tr>
<td colspan="2" class="header">Download Project Files </td>
</tr>
<tr>
<td colspan="2" class="caption"><a href="@Url.Content("/content/aspmvcform/mvc4contactform.zip")">Zip</a></td>
</tr>
</table>
<h3>Prerequisites</h3>
<p>We will need the following installed on our computer to follow along:</p>
<ul>
<li>Visual Studio 2010 or later</li>
<li><abbr title="Active Server Pages">ASP</abbr> <abbr title="Model View Controller">MVC</abbr> 4 or later
<ul>
<li>Visit <a href="http://www.asp.net/mvc/mvc4" target="_blank">http://www.asp.net/mvc/mvc4</a> to download and install</li>
</ul>
</li>
<li>.NET 4.0 or later</li>
</ul>
<p>Feel free to use the included finished solution as a reference as we progress through the article.</p>
<h3>Start Visual Studio 2010</h3>
<p>From the desktop, do the following:</p>
<ul>
<li>Start : <span class="special">Visual Studio 2010</span></li>
<li>From the start page, left click <span class="special">File:New:Project</span></li>
</ul>
<p>From the New Projects window, choose Web and <abbr title="Active Server Pages">ASP</abbr>.NET <abbr title="Model View Controller">MVC</abbr> 4 Web Application as illustrated:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/1.png")" data-lightbox="image-1"><img src="@Url.Content("~/content/aspmvcform/thumbs/1.png")" alt="New Projects window" width="276" height="82" /></a></p>
<p>In the name, location and solution name text fields, choose the following as illustrated:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/2.png")" data-lightbox="image-2"><img src="@Url.Content("~/content/aspmvcform/thumbs/2.png")" alt="New Projects window" width="270" height="33" /></a></p>
<p>Left click OK. In the <span class="special">New <abbr title="Active Server Pages">ASP</abbr>.NET <abbr title="Model View Controller">MVC</abbr> 4 Project</span> window, choose Internet Application and leave the rest as defaults as illustrated:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/3.png")" data-lightbox="image-3"><img src="@Url.Content("~/content/aspmvcform/thumbs/3.png")" alt="New ASP.NET 4 Project" width="269" height="158" /></a></p>
<p>Left click OK. Visual Studio will work in the background for a bit and once finished, we’ll have a
complete solution created, as well as <span class="special">HomeController.cs</span> opened.</p>
<h3>Solution Explorer</h3>
<p>Let’s examine the details of the solution explorer. We see the following structure:</p>
<p class="align"><img src="@Url.Content("~/content/aspmvcform/thumbs/4.png")" alt="Solution Explorer" width="272" height="360" /></p>
<p>App_Start</p>
<ul>
<li>Contains specific configuration files including but not limited to <span class="special">RouteConfig.cs</span>, which allows
us to customize how uniform resource locators (URL’s) look in a browser’s address bar.</li>
</ul>
<p>Content:</p>
<ul>
<li>Contains all content related files, such as style sheets, word/pdf documents, and web pages that
are not razor syntax.</li>
</ul>
<p>Controllers:</p>
<ul>
<li>Contains all action related files. In the <abbr title="Model View Controller">MVC</abbr> paradigm, controllers determine which razor pages
display based on controller actions. These files are usually named with the following convention:
<span class="special">HomeController.cs</span>, or <span class="special">AboutController.cs</span>, which can be catered to your needs, but is
recommended you stick to the naming conventions used in Visual Studio, which end in
&lt;NameofController&gt;<span class="special">Controller.cs</span>.</li>
</ul>
<p>Models:</p>
<ul>
<li>Contains all database related files. In the <abbr title="Model View Controller">MVC</abbr> paradigm, models handle database calls namely,
Microsoft <abbr title="Structured Query Language">SQL</abbr> Server &#8212; <abbr title="Language Integrated Query">LINQ</abbr> calls and validation of form fields that are passed to a controller
and then the appropriate view. These files are usually named with the following convention:
<span class="special">HomeModel.cs</span>, or <span class="special">AboutModel.cs</span>, which can be catered to your needs, but is recommended you
stick to the naming conventions used in Visual Studio, which end in
&lt;NameofController&gt;<span class="special">Models.cs</span>.</li>
</ul>
<p>Scripts:</p>
<ul>
<li>Contains JavaScript files, namely <span class="special">JQuery</span> library. You can use any JavaScript library you choose.</li>
</ul>
<p>Views:</p>
<ul>
<li>Contains razor <abbr title="Hypertext Markup Language">HTML</abbr> 5 web pages. These files are always named with a <span class="special">.CSHTML</span> extension,
and are used in conjunction with our controllers to determine which pages display based on
actions.</li>
</ul>
<p>Global.asax and web.config files are as follows:</p>
<ul>
<li>Global.asax: maps <span class="special">App_Start</span> configuration files for the entire solution.</li>
<li>Web.config: configuration file that contains information specific to connecting to a database
engine, which version of .NET framework you’re using, and whether or not we have unobtrusive
JavaScript enabled.</li>
</ul>
<h3>A few things to note…</h3>
<p>We have removed the default <span class="special">_ViewStart.cshtml</span> file from the solution, and taken its one line razor
snippet and placed at the top of our index, contact, and about razor files which reside in <span class="special">Views: Home</span>
directory of our solution.</p>
<p>We’ve also removed default indentation of these razor views to alleviate the extra bytes that would be
sent on each <abbr title="Hyper Text Transfer Protocol">HTTP</abbr> request, plus, it makes our markup look a bit more readable. Lastly, we’ve left the
default style sheet in place just to make things a bit easier from a stylistic stand point, so we can focus on
the form itself.</p>
<h3>Create the model</h3>
<p>In order to bind and validate our <abbr title="Hypertext Markup Language">HTML</abbr> 5 form fields, we need to create a model. Model’s in the <abbr title="Model View Controller">MVC</abbr>
paradigm are in charge of querying database data and returning the results to a controller, which then
passes the data (now information) to our view. Model’s also serve another purpose, they allow us to
validate form field input making sure fields are not empty if required, as well as other types of validation
including regular expressions, min and max length, etc.</p>
<p>For our form, we’ll have four fields:</p>
<ol>
<li>First Name</li>
<li>Last Name</li>
<li>Email</li>
<li>Comments</li>
</ol>
<p>Let’s create our model by following these steps:</p>
<ul>
<li>From the solution explorer, right click <span class="special">Models : Add : Class</span></li>
</ul>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/21.png")" data-lightbox="image-21"><img src="@Url.Content("~/content/aspmvcform/thumbs/21.png")" alt="Models Add Class" width="285" height="141" /></a></p>
<ul>
<li>In the <span class="special">Add new item</span> window, type <span class="special">ContactModels.cs</span>, in the name text field</li>
</ul>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/6.png")" data-lightbox="image-6"><img src="@Url.Content("~/content/aspmvcform/thumbs/6.png")" alt="Create model" width="228" height="147" /></a></p>
<p>Left click <span class="special">Add</span>.</p>
<p>In our new model class, let’ create our four form field’s variables as illustrated:</p>
<pre class="brush:csharp">
public class ContactModels
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public string Comment { get; set; }
}
</pre>
<p>As you can from the example above, we:</p>
<ul>
<li>Create four public string class variables which will hold the data entered from our form</li>
</ul>
<p>Save your changes.</p>
<p>We'll continue with adjusting our view @Html.ActionLink("next","Index2").</p>
<p><a href="#top">top of page</a></p>